<template>
<!--    老乡-->
    <div>
        <div style="overflow: hidden">
            <div v-for="(item,index) in list" :key="index" class="box">
                <div class="boxlist">
                    <div class="avatarbox" @click="getothers(item.user_id)">
                        <img src="../assets/images/123.jpg" alt="" v-if="item.head_img == '123.jpg'">
                        <img :src="item.head_img" alt="" v-else>
                    </div>
                    <div style="margin-left: 20px" class="boxlist1">
                        <div style="margin-bottom: 5px">{{item.nickname}}&nbsp;&nbsp;</div>
                        <div style="margin-bottom: 5px">qq：{{item.qq}}</div>
                        <div style="margin-bottom: 5px">专业：{{item.professional}}</div>
                        <div style="margin-bottom: 5px">地址：{{item.address}}</div>
                        <div style="margin-bottom: 5px">个性签名：</div>
                        <div>{{item.signature}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div style="text-align: center;margin-top: 20px;cursor: pointer" @click="more" v-show="ismore">加载更多</div>
    </div>
</template>

<script>
    import {getuser, gethome, getothersuser} from "../api/api";

    export default {
        name: "hometown",
        data(){
            return{
                list:[],
                n:1,
                address:'',
                ismore:true
            }
        },
        methods:{
            //查看他人信息
            getothers(user_id){
                getothersuser(user_id).then(res=>{
                    // console.log(res)
                    if(res.status == 0){
                        this.$router.push({
                            name:'other',
                            params: {
                                userinfo: res.data
                            }
                        })
                        sessionStorage.setItem('userinfo',JSON.stringify(res.data))
                    }
                })
            },
            get(n){
                gethome(sessionStorage.getItem('address'),n).then(res=>{
                    // console.log(res)
                    if(res.status == 0){
                        if(res.data.length == 0){
                           this.ismore = false
                        }
                        this.list = this.list.concat(res.data)
                    }
                })
            },
            more(){
                this.n++
                this.get(this.n)
            }
        },
        created() {
           getuser().then(res=>{
               if(res.status == 0){
                   if(res.data.address.indexOf('省') == -1){
                       this.address = res.data.address.substring(0,res.data.address.indexOf('市')+1)
                   }else {
                       this.address = res.data.address.substring(res.data.address.indexOf('省')+1, res.data.address.indexOf('市')+1)
                   }
                   sessionStorage.setItem('address',this.address)
                   this.get(this.n)
               }
           })
        }
    }
</script>

<style scoped>
    .box {
        background-color: white;
        float: left;
        width: 40%;
        margin-right: 10%;
        border-radius: 10px;
        padding: 20px;
    }
    .avatarbox {
        float: left;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        box-shadow: 5px 5px 5px gray;
        cursor: pointer;
    }
    .avatarbox>img {
        width: 100%;
        height: 100%;
    }
    .boxlist {
        overflow: hidden;
        font-size: 13px;
    }
    .boxlist1 {
        float: left;
        width: calc(100% - 80px);
        overflow: hidden;
    }
    .boxlist1>div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
